<template>
  <nut-radio-group
    ref="radioRef"
    v-model="text"
    v-on="onEvents"
    :direction="direction"
    :disabled="disabled"
    :readonly="readonly"
  >
    <nut-radio
      v-for="item in dic"
      :key="item.value"
      :label="item[valueKey]"
      :shape="shape"
      :size="size"
    >
      {{ item[labelKey] }}
      <template v-for="slot in Object.keys($slots)" #[slot]="scope">
        <slot v-bind="scope" :name="slot" />
      </template>
    </nut-radio>
  </nut-radio-group>
</template>

<script setup>
import { commonProps, useCommonProps } from '@/supreme/core/props';
import { useEvents } from '@/supreme/core';
import { useVModel } from '@vueuse/core';
defineOptions({
  name: 'SuRadio'
});
const props = defineProps({
  ...commonProps,
  modelValue: {
    type: [String, Number],
    default: null
  },
  iconSize: {
    type: String,
    default: '18'
  },
  direction: {
    type: String,
    default: 'horizontal'
  },
  shape: {
    type: String,
    default: 'round'
  },
  size: {
    type: String,
    default: 'normal'
  }
});

const emit = defineEmits(['update:modelValue', 'change', 'confirm', 'cancel']);
const text = useVModel(props, 'modelValue', emit);
const formSafe = inject('formSafe');
const radioRef = ref();
const onEvents = computed(() => {
  const events = ['change'];
  return useEvents({ props, events, emit, form: formSafe?.form });
});
const { labelKey, valueKey } = useCommonProps(props);
</script>

<style lang="scss" scoped></style>
